<template>
  <div>
    <navbar bold title="Button 按钮"/>
    <div class="group">
      <description :description="typeDes"/>
      <div class="btn-group">
        <w-button class="margin10">默认按钮</w-button>
        <w-button class="margin10" type="primary">主要按钮</w-button>
        <w-button class="margin10" type="success">成功按钮</w-button>
        <w-button class="margin10" type="warning">警告按钮</w-button>
        <w-button class="margin10" type="danger">危险按钮</w-button>
      </div>
    </div>

    <div class="group">
      <description :description="sizeDes"/>
      <div class="btn-group">
        <w-button class="margin10">正常尺寸</w-button>
        <w-button class="margin10" size="medium">中等尺寸</w-button>
        <w-button class="margin10" size="small">小尺寸</w-button>
        <w-button class="margin10" type="primary">正常尺寸</w-button>
        <w-button class="margin10" size="medium" type="primary">中等尺寸</w-button>
        <w-button class="margin10" size="small" type="primary">小尺寸</w-button>
      </div>
    </div>
    <div class="group">
      <description :description="roundDes"/>
      <div class="btn-group">
        <w-button class="margin10" round>圆角按钮</w-button>
        <w-button class="margin10" type="primary" round>圆角按钮</w-button>
        <w-button class="margin10" type="success" round>圆角按钮</w-button>
        <w-button class="margin10" type="warning" round>圆角按钮</w-button>
        <w-button class="margin10" type="danger" round>圆角按钮</w-button>
      </div>
    </div>
    <div class="group">
      <description :description="loadingDes"/>
      <div class="btn-group">
        <w-button class="margin10" type="primary" loading>主要按钮</w-button>
        <w-button class="margin10" type="success" loading>成功按钮</w-button>
        <w-button class="margin10" type="warning" loading>警告按钮</w-button>
        <w-button class="margin10" type="danger" loading>危险按钮</w-button>
      </div>
    </div>
  </div>
</template>

<script>
import WButton from "@/components/button/button";
import Description from "@/components/description/description";
import Navbar from "@/components/navbar/navbar";

export default {
  name: "test-button",
  components: {Navbar, Description, WButton},
  data() {
    return {
      type: 'danger',
      typeDes: {
        params: 'type',
        des: '按钮类型',
        type: 'string',
        default: '——',
        choice: 'primary / success / warning / danger'
      },
      sizeDes: {
        params: 'size',
        des: '按钮尺寸',
        type: 'string',
        default: '——',
        choice: 'medium / small'
      },
      roundDes: {
        params: 'round',
        des: '是否圆角',
        type: 'boolean',
        default: 'false',
        choice: '——'
      },
      loadingDes: {
        params: 'loading',
        des: '加载中状态',
        type: 'boolean',
        default: 'false',
        choice: '——'
      }
    }
  },
  methods: {
    aaa() {
      console.log('aaa')
    }
  }
}
</script>

<style scoped>
/*.group{*/
/*  display: flex;*/
/*  justify-content: space-around;*/
/*  flex-wrap: wrap;*/
/*}*/
.btn-group {
  display: flex;
  flex-wrap: wrap;
}

.margin10 {
  margin: .1rem .2rem;
  flex-shrink: 0;
}

/*h2 {*/
/*  margin: 0 .4rem;*/
/*  line-height: 1rem;*/
/*}*/

/*p {*/
/*  margin: 0 .4rem;*/
/*  line-height: .6rem;*/
/*}*/
</style>